import { Button, Tooltip, Switch } from 'antd';
import { Fragment } from 'react';
import { EditOutlined } from '@ant-design/icons';
import { AuthClientManageAPI } from '../common/type';
import { tooltipLength } from '@/utils';
import pageStyles from '@/common/pageLayout.less';

/** 认证客户端管理页面功能操作 */
const getManageFunctions = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: AuthClientManageAPI.ITableActionType,
  /** 数据操作对象 */
  record: Record<string, any>,
) => {
  /** 功能操作集 */
  let operationList: any = [];

  /** 编辑操作 */
  const EditFunc = curRes['/clientController/edit'] && (
    <Fragment key={record?.id + 'preEditOutLined'}>
      <Button
        className='manageBtntTxtStyle'
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
        onClick={() => {
          operateFnc?.onEdit(record);
        }}
      >
        编辑
      </Button>
    </Fragment>
  );

  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button
        style={{ color: '#000' }}
        className='manageBtntTxtStyle'
        type={'link'}
        size={'small'}
        disabled
      >
        --
      </Button>
    </Fragment>
  );

  operationList = [EditFunc];
  operationList = operationList?.filter((itemBtn: any) => itemBtn);
  return operationList && operationList?.length > 0 ? operationList : [Disable];
};

/** 行政区域数据表格信息 展示和操作 */
const getManageTableColumns = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: AuthClientManageAPI.ITableActionType,
) => {
  return [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
      visible: true,
      unDrag: true,
      fixed: 'left',
      sorter: (a: any, b: any) => (a.provinceCode > b.provinceCode ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 50) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '类型',
      dataIndex: 'clientType',
      key: 'clientType',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.clientType - b.clientType,
      render: (text: string | null) => {
        let newText = '';
        let color = '';
        if (text == '0') {
          newText = 'WEB应用';
          color = '#096dd9';
        } else if (text == '1') {
          newText = '移动应用';
          color = '#f759ab';
        } else if (text == '2') {
          newText = '三方对接';
          color = '#faad14';
        }
        return (
          <span
            className={pageStyles['over-flow-hidden']}
            style={{ color }}
          >
            {newText ? newText : '--'}
          </span>
        );
      },
    },
    {
      title: '作用域',
      dataIndex: 'scope',
      key: 'scope',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.cityCode > b.cityCode ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 100) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '授权类型',
      dataIndex: 'authType',
      key: 'authType',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.authType > b.authType ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 100) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '有效时长（s）',
      dataIndex: 'tokenSpan',
      key: 'tokenSpan',
      width: 160,
      visible: true,
      sorter: (a: any, b: any) => a.tokenSpan - b.tokenSpan,
      render: (text: string | null) => {
        return (
          <span className={pageStyles['over-flow-hidden']}>
            {text ? text : '--'}
          </span>
        );
      },
    },
    {
      title: '刷新时长（s）',
      dataIndex: 'refreshSpan',
      key: 'refreshSpan',
      width: 160,
      visible: true,
      sorter: (a: any, b: any) => a.refreshSpan - b.refreshSpan,
      render: (text: string | null) => {
        return (
          <span className={pageStyles['over-flow-hidden']}>
            {text ? text : '--'}
          </span>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'isOpen',
      key: 'isOpen',
      width: 110,
      visible: true,
      sorter: (a: any, b: any) => a.isOpen - b.isOpen,
      render: (text: number, record: Record<string, any>) => {
        return (
          <>
            <Switch
              checkedChildren="启动"
              unCheckedChildren="禁用"
              checked={text == 0 ? false : true}
              onChange={(checked: boolean, event: any) => {
                event?.stopPropagation();
                operateFnc?.onChange(checked, record);
              }}
              disabled={!curRes['/clientController/isOpen']}
            />
          </>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
      visible: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? tooltipLength(text, 100) : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '修改时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.modifyTime > b.modifyTime ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '修改人',
      dataIndex: 'modifyerName',
      key: 'modifyerName',
      width: 110,
      visible: true,
      sorter: (a: any, b: any) => (a.modifyerID > b.modifyerID ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '修改人岗位',
      dataIndex: 'modifyPositionName',
      key: 'modifyPositionName',
      width: 150,
      visible: false,
      sorter: (a: any, b: any) =>
        a.modifyPositionID > b.modifyPositionID ? 1 : -1,
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '修改人部门',
      dataIndex: 'modifyDepartmentName',
      key: 'modifyDepartmentName',
      width: 150,
      visible: false,
      sorter: (a: any, b: any) =>
        a.modifyDepartmentID > b.modifyDepartmentID ? 1 : -1,
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '修改人公司',
      dataIndex: 'modifyCompanyName',
      key: 'modifyCompanyName',
      width: 150,
      visible: false,
      sorter: (a: any, b: any) =>
        a.modifyCompanyID > b.modifyCompanyID ? 1 : -1,
      render: (text: string | null) => {
        return (
          <Tooltip title={text ? text : ''}>
            <span className={pageStyles['over-flow-hidden']}>
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 90,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (_text: any, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {getManageFunctions(curRes, operateFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getManageTableColumns };
